<template>
	<div class="mk-patient">
		<el-input v-if="isEdit" v-model.trim="huanZheId" placeholder="录入后 回车 切换患者信息" @keyup.enter="searchPatient"
			style="margin: 0 2rem 0 0 !important; width: 220px;" ref="inputRef" />
		<div class="mk-patient-info">
			<div style="letter-spacing: 0.2em; display: flex; align-items: center">
				<span class="strongText">{{ model.xingMing }}</span>
				<el-divider direction="vertical" />
				<span>{{ model.huanZheId }}</span>
				<el-divider direction="vertical" />
				<span :class="classABO"> {{ model.chuShaiABO }} </span>
				<span v-if="model.chuShaiRhD == '-'" style="">
					<span class="rhd-yingxing"> Rh(D)阴性 </span>
				</span>
				<span class="strongText" v-else> {{ model.chuShaiRhD }}</span>
				<el-divider direction="vertical" />
				<span>{{ model.nianLing }}</span>
				<el-divider direction="vertical" />
				<span>{{ model.xingBie }}</span>
				<el-divider direction="vertical" />
				<span>{{ model.bingQu }}</span>
				<el-divider direction="vertical" />
				<span>{{ model.chuangHao }}</span>
				<el-divider direction="vertical" />
				<span>{{ model.jiuZhenLeiXing }}</span>
			</div>
			<div v-if="isEdit" class="editBox" @click="edit">
				<i class="fa fa-pencil" style="font-size: medium;" />
			</div>
		</div>
		<MkDialogEdit ref="dialogRef" @submit="submit" title="修改患者信息" v-model:isEdit="editHuanZhe">
			<el-form formId="mkPatient" label-width="150px">
				<MkInput label="住院号/患者Id" v-model.trim="huanZheXinXiEdit.huanZheId" :isEdit="false" />
				<MkInput label="姓名" v-model.trim="huanZheXinXiEdit.xingMing" :isEdit="false" />
				<MkSelect label="ABO血型" v-model.trim="huanZheXinXiEdit.chuShaiABO" :isEdit="editHuanZhe"
					:options='["A", "B", "O", "AB", "未知"]' />
				<MkSelect label="Rh(D)血型" v-model.trim="huanZheXinXiEdit.chuShaiRhD" :isEdit="editHuanZhe"
					:options='["+", "-", "未知"]' />
				<MkInput label="年龄" v-model.trim="huanZheXinXiEdit.nianLing" :isEdit="editHuanZhe" />
				<MkSelect label="性别" v-model.trim="huanZheXinXiEdit.xingBie" :isEdit="editHuanZhe"
					:options="['男', '女']" />
				<MkSelectOrg scope="KeShi" entity="" label="病区" v-model.trim="huanZheXinXiEdit.bingQu"
					:isEdit="editHuanZhe" />
				<MkInput label="床号" v-model.trim="huanZheXinXiEdit.chuangHao" :isEdit="editHuanZhe" />
				<MkSelect label="就诊类型" v-model.trim="huanZheXinXiEdit.jiuZhenLeiXing" :isEdit="editHuanZhe"
					:options="['住院', '门诊']" />
			</el-form>
		</MkDialogEdit>
	</div>
</template>

<script lang="ts" setup>
/* 患者信息的录入,显示,编辑
用在输血申请及其他需要录入患者信息的界面
调用his接口读取患者信息
支持修改患者信息: 需控制部分信息可以修改(例如年龄),部分不能修改
如果不对接his,手动录入患者信息的情况不适合用此控件: 需开发一个独立的组件录入
*/
import { TraShenQingHuanZheInput } from '/@/api/tra/TraShenQing';
import { isNull, clone, clog, showError } from '/@/utils';
defineOptions({
	name: 'MkPatient',
});
const props = defineProps({
	isEdit: {
		// 是否显示录入和编辑按钮, 在输血申请按钮界面启用, 其他只显示的界面不启用
		type: Boolean,
		default: false,
	},
});

const editHuanZhe = ref(false);

const model = defineModel({ default: {} as PatientResult })

const huanZheId = ref("");
const huanZheXinXiEdit = ref({} as PatientResult);
const dialogRef = ref();

const edit = () => {
	huanZheXinXiEdit.value = clone(model.value);
	editHuanZhe.value = false;
	dialogRef.value.show();
};

const submit = () => {
	// 逐个赋值, 保持数据双向传输, 避免其他患者信息丢失
	for (const key in huanZheXinXiEdit.value) {
		if (Object.prototype.hasOwnProperty.call(huanZheXinXiEdit.value, key)) {
			model.value[key] = huanZheXinXiEdit.value[key];
		}
	}
	dialogRef.value.close();
	emits('editPatientInfo')
}
const emits = defineEmits(['getPatientSuccess', 'getPatientFail', 'editPatientInfo'])
const searchPatient = async () => {
	clog('searchPatient', huanZheId.value);
	try {
		let param = {
			huanZheId: huanZheId.value,
		};
		// 调用WCF接口获取患者信息
		let re = await searchHisPatient(param);
		clog('请求患者信息', re, model.value);
		huanZheId.value = ''
		if (re && re.resCode != '正常') {
			showError(re.resMsg);
			emits('getPatientFail')
			return;
		}
		model.value = re.result;
		// 必须用nextTick再进行事件派发
		// console.log(model.value.ABO) --  此处会是 undefined
		// nextTick(() => {
		//  console.log(model.value.ABO) --  此处才会是给model.value.ABO赋上的值
		// })
		// 原因：model用的是defineModel, 修改model.value的过程需要先触发父组件的响应式更新，子组件再接收到最新的model,
		// 而如果直接派发事件，子组件可能还没有获取到最新的model, 导致事件派发异常
		nextTick(() => {
			emits('getPatientSuccess')
		})

	} catch (e) {
		console.log(e);
	}
};

const classABO = computed(() => {
	switch (model.value.chuShaiABO) {
		case 'A':
			return 'classA'
		case 'B':
			return 'classB'
		case 'AB':
			return 'classAB'
		case 'O':
			return 'classO'
		default:
			return ''
	}
})

// 模拟后端接口
const searchHisPatient = (param: { huanZheId: string }): Promise<WcfResult> => {
	return new Promise((resolve) => {
		// 模拟接口响应，这里根据传入的 huanZheId 返回一个模拟数据
		let matchedData = mockDataList.find((data) => data.result.huanZheId === param.huanZheId);
		if (!matchedData) {
			// 模拟报错
			matchedData = {
				resMsg: 'wcf报错,报错信息如下:xxxxxx',
				resCode: 'wcf报错', // 取值: 患者不存在,wcf报错,三方报错
				result: {} as PatientResult
			}
		}
		setTimeout(() => {
			resolve(matchedData);
		}, 1000);
	});
}
const inputRef = ref()
const inputFocus = () => {
	inputRef.value?.focus()
}
defineExpose({ inputFocus })
const mockDataList = [
	{
		resMsg: 'success',
		resCode: '正常',
		result: {
			huanZheId: '123',
			xingMing: '张三',
			chuShaiABO: 'B',
			chuShaiRhD: '+',
			xingBie: '男',
			nianLing: '90',
			bingQu: '骨科病区',
			chuangHao: '03',
			jiuZhenLeiXing: '住院',
			shenGao: 180,
			tiZhong: 60
		}
	},
	{
		resMsg: 'success',
		resCode: '正常',
		result: {
			huanZheId: '12345',
			xingMing: '李四',
			chuShaiABO: 'AB',
			chuShaiRhD: '-',
			xingBie: '女',
			nianLing: '80',
			bingQu: '妇科病区',
			chuangHao: '01',
			jiuZhenLeiXing: '门诊'
		}
	},
	{
		resMsg: 'success',
		resCode: '正常',
		result: {
			huanZheId: '0607',
			xingMing: '王五',
			chuShaiABO: 'AB',
			chuShaiRhD: '+',
			xingBie: '女',
			nianLing: '80',
			bingQu: '妇科病区',
			chuangHao: '01',
			jiuZhenLeiXing: '门诊'
		}
	},
];

interface PatientResult {
	huanZheId: string;
	xingMing: string;
	chuShaiABO: string;
	chuShaiRhD: string;
	xingBie: string;
	nianLing: string;
	bingQu: string;
	chuangHao: string;
	jiuZhenLeiXing: string;
}

interface WcfResult {
	resMsg: string;
	resCode: string;
	result: PatientResult;
}
</script>

<style lang="scss" scoped>
.mk-patient {
	display: flex;
	flex-direction: row;
	padding: 0 0 10px 20px;
	align-items: flex-start;

	.mk-patient-info {
		display: flex;
		align-items: center;

		.strongText {
			font-size: 1.5em;
			font-weight: bold;
		}

		.editBox {
			margin-left: 2em;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1.5em;
			height: 2em;
			flex-shrink: 0;
		}

		.editBox:hover {
			background-color: #f8f8f8;
		}
	}
}

.classA {
	font-size: 22px;
	font-weight: bold;
	color: blue;
}

.classB {
	font-size: 22px;
	font-weight: bold;
	color: orange;
}

.classO {
	font-size: 22px;
	font-weight: bold;
}

.classAB {
	font-size: 22px;
	font-weight: bold;
	color: red;
}

.rhd-yingxing {
	font-size: 20px;
	color: white;
	background-color: black;
	padding: 0 5px;
}
</style>
